<template>
	<div class="special-box">
		<div class="special-title">
			<ul class="special-title-left">
				<li style="color: #000;"><a href="/" style="color: #000;">首页 </a> </li>				
				<li>></li>
				<li style="color: #000000;">专题列表</li>
				<li>传来的商品ID--{{$route.params.goodsId}}</li>
			</ul>
			<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/menu.png"/>
		</div>
		<div class="special-center">			
			 	<div class="special-center-box"> 			 		
						<div class="special-center-item" v-for="(sp,index) in itemsSp">
							<router-link to="/zhuantiEji">
								<img :src="sp.img"/>
							</router-link>
							<h3 class="special-item-conten">{{ sp.title }}</h3>
							<p class="special-item-bottom">{{ sp.tenter }}</p>							
						</div>			 			
				</div>			 			
		</div>
		<div class="special-footer" @click="xr">
			<p class="jiazai">还剩下{{ sheyu }}专题</p>
		</div>
			
		<router-view></router-view>
	</div>
	
</template>

<script>
	export default {
			data(){
				return{
					num:0,
					sheyu:60,
					itemsSp:[],
				}
			},
			methods:{
				zhuTiDj(){
					return this.num+=10;				
				},
				xr (){
					fetch("./static/specialshuju.json").then(function(res){
						return res.json();
					})
					.then((res)=>{
						this.sheyu=res.length-this.num;
						this.itemsSp=res;
						this.itemsSp.length=this.zhuTiDj();
					})
				}
			},
			mounted (){
				fetch("./static/specialshuju.json").then(function(res){
					return res.json();
				})
				.then((res)=>{					
					this.itemsSp=res;
					this.itemsSp.length=this.zhuTiDj();
				})
			}
		}
</script>

<style>
	@import "../assets/lureny/gu-title.css";
	.special-center{
			margin-top: .97rem;
	}
	.special-center-box{
			background: #fff;
			width: 100%;
			height: 100%;
			padding-bottom: .4rem;
		}
	.special-center-item{
			width: 94%;
			height: 100%;
			margin-top: .2rem;
			background: #fff;
			margin: 0 auto;
			margin-top: .2rem;
		}
	.special-center-item img{
			width: 100%;
			margin-top: .2rem;			
		}
	.special-item-conten{
			width: 100%;
			height: .5rem;
			font-size: .3rem;
			color: #333;
		}
	.special-item-bottom{
			color: #888;
		}
	.special-footer{
		background: #fff;
		width: 100%;
		height: 1rem;
		text-align: center;
	}
	.jiazai{
		width: 90%;
		height: .7rem;
		border-radius: .3rem;
		font-size: .4rem;
		background: #ddd;
		line-height:.7rem;
		margin: 0 auto;
	}	
</style>